<template>
  <div>
    <!-- label -->
    <label v-if="label">{{ label }}</label>

    <slot></slot>

    <!-- 校验信息显示 -->
    <p v-if="error">{{ error }}</p>

    <!-- 校验规则 -->
    <p>{{ form.model }}</p>
  </div>
</template>

<script>
// Asyc-validator
import Schema from 'async-validator'

export default {
  inject: ['form'],
  data() {
    return {
      error: '' // error是空说明校验通过
    }
  },
  props: {
    label: {
      type: String,
      default: ''
    },
    prop: {
      type: String
    }
  },
  mounted() {
    this.$on('validate', () => {
      this.validate()
    })
  },
  methods: {
    validate() {
      // 规则
      const rules = this.form.rules[this.prop]
      // 当前值
      const value = this.form.model[this.prop]
      // 校验描述对象
      // 左边是一个计算属性
      // 对于rules和value this.prop 就是username或者password
      // 所以是一个变量 根据设置的名字来对规则和输入进行检测
      const descriptor = { [this.prop]: rules }
      // 创建Schema实例
      const schema = new Schema(descriptor)
      // 校验源就是value 对value校验
      // 回调函数的参数就是err
      // error是之前设置的可变属性
      // 通过就是'' 否则就报错
      // err[0]? err是一个错误数组 输出第一位就可以了
      // message就是指定的错误提示信息
      return schema.validate({ [this.prop]: value }, err => {
        if (err) {
          this.error = err[0].message
        } else {
          // 校验通过
          // 信息置空
          // 因为之前可能没通过
          this.error = ''
        }
      })
    }
  }
}
</script>

<style scoped></style>
